<template>
  <div>
    <!-- 顶部 -->
    <div class="intro-item-header" mb-10 flex-center justify-between>
      <!-- 标题 -->
      <div class="intro-item-header-title" flex-center>
        <SvgIcon icon-class="psy-rhombus" w-18 h-18 mb-2></SvgIcon>
        <h4 ml-5 fw-bold>
          <!-- 12个主要维度 -->
          {{ data.title }}
        </h4>
      </div>
      <div></div>
    </div>

    <!-- 分割线 -->
    <div w-full h-2 b-rd-full style="background-color: #eee"></div>

    <!-- 内容形式 1 - 文本 -->
    <div v-if="data.type === 'text'" class="intro-item-content" flex-col-center>
      <p>
        <!-- PDQ+4适用于所有对自身人格特征感兴趣的人群，无论是希望了解自身人格状态的普通人士，还是需要监测自身人格变化的特殊人群。通过定期的自我评估，您可以更好地理解和管理自己的人格特征。 -->
        {{ data.info[0].value }}
      </p>
    </div>

    <!-- 内容形式 2 - 表格 -->
    <div v-if="data.type === 'table'" class="intro-item-content custom-table">
      <el-table :data="data.info" border>
        <el-table-column
          prop="key"
          label="维度"
          width="300px"
        ></el-table-column>
        <el-table-column prop="value" label="解释"></el-table-column>
      </el-table>
    </div>

    <!-- 内容形式 3 - 列表 -->
    <div v-if="data.type === 'list'" class="intro-item-content">
      <ul>
        <li
          v-for="item in data.info"
          :key="item.key"
          lh-30
          z--1
          list-disc-inside
        >
          <strong fw-bold>{{ item.key }}：</strong>{{ item.value }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import SvgIcon from "@/components/SvgIcon";

defineProps({
  data: { type: Object, required: true },
});
</script>

<script>
/**
 * 介绍项
 * 负责人：唐诗轶
 */
export default {
  name: "IntroItem",
};
</script>

<style lang="scss" scoped>
.intro-item-content {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

.custom-table {
  position: relative;
  z-index: 0; /* Adjust the z-index to be lower */
}
</style>
